﻿<template id="product-box-vue" asp-footer="true">
<div class="card product-box show product-provider mb-2">
<template v-if="Model.Flag !== null">
    <div class="flag-label">
        <span v-html="Model.Flag"></span>
    </div>
</template>
<div class="picture-container">
    <a class="img-container" :href="'/' + Model.SeName" :title="Model.DefaultPictureModel.Title">
        <b-img-lazy width="150" height="200" :alt="Model.DefaultPictureModel.AlternateText" class="main-product-img" :src="Model.DefaultPictureModel.ImageUrl" :title="Model.DefaultPictureModel.Title"></b-img-lazy>
        <template v-if="Model.SecondPictureModel.ImageUrl !== null">
            <b-img-lazy width="150" height="200" class="hover-img" :alt="Model.SecondPictureModel.AlternateText" :src="Model.SecondPictureModel.ImageUrl"></b-img-lazy>
        </template>
    </a>
    <template v-if="Model.ProductAttributeModels.length > 0">
        <div class="attr-container">
            <table>
                <tbody>
                <tr v-for="item in Model.ProductAttributeModels">
                    <td>
                        <div v-if="item.AttributeControlType !== 40 && item.AttributeControlType !== 45" class="attr-name">
                            {{item.Name}}
                        </div>
                    </td>
                    <td>
                        <div class="attr-value">
                            <template v-for="spec in item.Values">
                                <template v-if="item.AttributeControlType == 1 || item.AttributeControlType == 2 || item.AttributeControlType == 3 || item.AttributeControlType == 50">
                                    <b-button variant="light" size="sm" class="name" :href="'/'+ Model.SeName + '?' + item.Name + '=' + spec.Name">
                                        {{spec.Name}}
                                    </b-button>
                                </template>
                                <template v-if="item.AttributeControlType == 40">
                                    <template v-if="spec.ImageSquaresPictureModel.FullSizeImageUrl !== undefined">
                                        <b-button variant="light" size="sm" class="standard name color-container" :title="spec.Name" @@click="if(spec.PictureModel.FullSizeImageUrl !== null){vm.productImage($event)}" :data-href="spec.PictureModel.FullSizeImageUrl">
                                            <span class="color" :style="'background-color:' + spec.ColorSquaresRgb">&nbsp;</span>
                                        </b-button>
                                    </template>
                                    <template v-else>
                                        <b-button variant="light" size="sm" class="standard name color-container" :title="spec.Name" :href="'/'+ Model.SeName + '?' + item.Name + '=' + spec.Name">
                                            <span class="color" :style="'background-color:' + spec.ColorSquaresRgb">&nbsp;</span>
                                        </b-button>
                                    </template>
                                </template>
                                <template v-if="item.AttributeControlType == 45">
                                    <template v-if="spec.ImageSquaresPictureModel.FullSizeImageUrl !== undefined">
                                        <b-button variant="light" size="sm" class="standard p-1 name image-container" v-on:click="if(spec.PictureModel.FullSizeImageUrl !== null){vm.productImage($event)}" :data-href="spec.PictureModel.FullSizeImageUrl">
                                            <b-img-lazy :src="spec.ImageSquaresPictureModel.ImageUrl" :alt="spec.Name"></b-img-lazy>
                                        </b-button>
                                    </template>
                                    <template v-else>
                                        <b-button variant="light" size="sm" class="standard p-1 name image-container" :href="'/'+ Model.SeName + '?' + item.Name + '=' + spec.Name">
                                            <b-img-lazy :src="spec.ImageSquaresPictureModel.ImageUrl" alt="spec.Name"></b-img-lazy>
                                        </b-button>
                                    </template>
                                </template>
                            </template>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </template>
    <div class="other-buttons">
        <template v-if="!Model.ProductPrice.DisableWishlistButton && Model.ProductType == 0">
            <template v-if="!Model.ShowQty">
                <a v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToWishlist"]" class="btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`@Url.RouteUrl("AddProductCatalog")/' + Model.Id +'/2?quantity=1`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                    <span class="icons icon-heart"></span>
                    <span class="sr-only">AddToWishlist</span>
                </a>
            </template>
            <template v-else>
                <a v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToWishlist"]" class="btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`@Url.RouteUrl("AddProductCatalog")/' + Model.Id +'/2`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                    <span class="icons icon-heart"></span>
                    <span class="sr-only">AddToWishlist</span>
                </a>
            </template>
        </template>
        <template v-if="!Model.ProductPrice.DisableAddToCompareListButton && Model.ProductType == 0">
            <a v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocomparelist(`'+ Model.Id +'`, `@Loc["Products.ProductHasBeenAddedToCompareList.Link"]`, `@Url.RouteUrl("CompareProducts")`)'">
                <span class="sr-only">AddToCompareList</span>
                <span class="icons icon-shuffle"></span>
            </a>
        </template>
    </div>
    <div class="qvb-container">
        <a title="@Loc["Products.QuickView"]" class="quick-view-button w-100 btn btn-secondary" data-target="ModalQuickView" :onclick="'AxiosCart.quickview_product(`@Url.RouteUrl("QuickView-Product")/' + Model.Id + '`);return false;'">
            <span class="icons icon-magnifier"></span>
            <span>@Loc["Products.QuickView"]</span>
        </a>
    </div>
</div>
<div class="card-body">
    <h5 class="card-title">
        <a :href="'/' + Model.SeName">
            {{Model.Name}}
        </a>
    </h5>
    <template v-if="Model.ShowSku && Model.Sku !== null">
        <span class="sku">{{Model.Sku}}</span>
    </template>
    <div class="prices-rating">
        <template v-if="Model.ReviewOverviewModel.AllowCustomerReviews">
            <div class="rating">
                <template v-if="Model.ReviewOverviewModel.TotalReviews > 0">
                    <b-form-rating :id="'rating-inline-grid-' + Model.Id" icon-full="star-fill" icon-empty="star-fill" class="p-0" aria-label="Rating" no-border size="sm" show-value precision="2" readonly inline :value="Model.ReviewOverviewModel.RatingSum / Model.ReviewOverviewModel.TotalReviews"></b-form-rating>
                </template>
                <template v-else>
                    <b-form-rating :id="'rating-inline-grid-' + Model.Id" icon-empty="star-fill" class="p-0" no-border size="sm" show-value precision="2" readonly inline :value="0"></b-form-rating>
                </template>
                <b-link :href="'/' + Model.SeName">{{Model.ReviewOverviewModel.TotalReviews}} @Loc["Reviews.Overview.Reviews"]</b-link>
            </div>
        </template>
        <template v-if="Model.ProductType == 40">
            <template v-if="Model.EndTime !== null">
                <div class="countdown-box alert alert-info w-100 mb-1">
                    <template v-if="new Date(Model.EndTime).getTime() > new Date().getTime()">
                        <countdown :end-time="new Date(Model.EndTime).getTime()">
                            <template v-slot:process="{ timeObj }">
                                <span class="col-form-label">@Loc["AddToCart.Timeleft"]:</span>
                                <span>{{ `${timeObj.d}` }} : </span>
                                <span>{{ `${timeObj.h}` }} : </span>
                                <span>{{ `${timeObj.m}` }} : </span>
                                <span>{{ `${timeObj.s}` }}</span>
                            </template>
                            <template v-slot:finish>
                                <span>@Loc["ShoppingCart.Auctionends"]</span>
                            </template>
                        </countdown>
                    </template>
                    <template v-else>
                        <div class="d-inline-flex flex-wrap justify-content-center">
                            <label class="ended-label">@Loc["ShoppingCart.Auctionends"]:</label>
                            <div class="count-date">{{Model.EndTimeLocalTime.Value}}</div>
                        </div>
                    </template>
                </div>
            </template>
        </template>
        <div class="prices" v-bind:class="{ 'reservation-price': Model.ProductType == 20 }">
            <template v-if="Model.ProductType != 40">
                <div class="actual-price price">
                    {{Model.ProductPrice.Price}}
                </div>
            </template>
            <template v-else>
                <div class="actual-price price">
                    <template v-if="Model.ProductPrice.HighestBidValue > 0 ">
                        {{Model.ProductPrice.HighestBid}}
                    </template>
                    <template v-else>
                        {{Model.ProductPrice.StartPrice}}
                    </template>
                </div>
            </template>
            <template v-if="Model.ProductPrice.OldPrice !== null">
                <div class="old-price price">
                    {{Model.ProductPrice.OldPrice}}
                </div>
            </template>
        </div>
    </div>
</div>
<div class="card-footer">
    <template v-if="Model.SpecificationAttributeModels[0] !== null">
        <div class="spec-container animate__animated" data-animation="animate__fadeIn" data-delay="animate__delay-1s">
            <table>
                <tbody>
                <tr v-for="group in Model.SpecificationAttributeModels">
                    <template v-if="group[0] !== undefined">
                        <td>
                            {{group[0].SpecificationAttributeName}}
                        </td>
                        <td v-for="spec in group" v-bind:id="spec.SpecificationAttributeId">
                            <template v-if="spec.ColorSquaresRgb == null">
                                <div class="spec-value">
                                    <span v-html="spec.ValueRaw"></span>
                                </div>
                            </template>
                        </td>
                    </template>
                </tr>
                </tbody>
            </table>
        </div>
    </template>
    <div class="desc" v-html="Model.ShortDescription"></div>
    <template v-if="Model.ShowQty">
        <input class="form-control input-group-addon catalog-quantity" type="number" :id="'addtocart_' + Model.Id + '_EnteredQuantity'" :name="'addtocart_' + Model.Id + '_EnteredQuantity'" value="1">
    </template>
    <template v-if="!Model.ProductPrice.DisableBuyButton">
        <template v-if="!Model.ShowQty">
            <a class="add-to-cart-button btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`@Url.RouteUrl("AddProductCatalog")/' + Model.Id +'/1?quantity=1`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                <span class="add-cart-text-view">
                    <template v-if="Model.ProductType == 20">
                        @Loc["ShoppingCart.Reservation"]
                    </template>
                    <template v-else>
                        <template v-if="Model.ProductPrice.AvailableForPreOrder">
                            @Loc["ShoppingCart.PreOrder"]
                        </template>
                        <template v-else>
                            @Loc["ShoppingCart.AddToCart"]
                        </template>
                    </template>
                </span>
                <span class="sr-only">AddToCart</span>
            </a>
        </template>
        <template v-else>
            <a class="add-to-cart-button btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`@Url.RouteUrl("AddProductCatalog")/' + Model.Id +'/1`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                <template v-if="Model.ProductType == 20">
                    @Loc["ShoppingCart.Reservation"]
                </template>
                <template v-else>
                    <template v-if="Model.ProductPrice.AvailableForPreOrder">
                        @Loc["ShoppingCart.PreOrder"]
                    </template>
                    <template v-else>
                        @Loc["ShoppingCart.AddToCart"]
                    </template>
                </template>
                <span class="sr-only">AddToCart</span>
            </a>
        </template>
    </template>
    <template v-else>
        <template v-if="Model.ProductType == 40">
            <a variant="info" class="add-to-cart-button btn btn-outline-secondary" :onclick="'AxiosCart.addproducttocart_catalog(`@Url.RouteUrl("AddProductCatalog")/' + Model.Id +'/1?quantity=1`, `' + Model.ShowQty +'`,`' + Model.Id + '`);return false;'">
                <span class="add-cart-text">@Loc["ShoppingCart.Bids"]</span>
                <span class="sr-only">AddToCart</span>
            </a>
        </template>
    </template>
</div>
</div>
</template>
<script asp-location="Footer" asp-order="118" type="module">
    Vue.component('product-box-vue', {
        template: '#product-box-vue',
        props: {
            Model: Object
        },
    });
</script>